<template>
  <div>
    <el-dialog
      :title="curid == '' ? '添加菜单' : '修改菜单'"
      :visible.sync="obj.isshow"
    >
      <el-form :model="form">
        <el-form-item label="所属角色" :label-width="formLabelWidth">
          <el-select v-model="form.roleid" placeholder="请选择所属角色">
            <el-option
              :key="item.id"
              v-for="item in menuArr ? menuArr : []"
              :label="item.rolename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
          <p v-show="curid != ''">留空则不修改</p>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <!-- 
            active-value: switch启用时的值
            inactive-value: switch禁用时的值
          -->
          <el-switch
            :active-value="1"
            :inactive-value="2"
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canle">取 消</el-button>
        <el-button type="primary" v-if="curid == ''" @click="addManuser"
          >添加</el-button
        >
        <el-button @click="modifymenu" v-else type="primary">修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { successMsg, failedMsg } from "../../tools/tools.js";
import { roleList, addManUser, userInfo, userEdit } from "../../request/api.js";
import { Base64 } from 'js-base64';
export default {
  props: ["obj"],
  methods: {
    addManuser() {
      addManUser(this.form)
        .then((d) => {
          if (d.data.code == 200) {
            successMsg("添加成功");
            this.empty(); //清空数据
            this.$emit("addmanUser");
          }else{
              failedMsg(d.data.msg)
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    empty() {
      this.form = {
        roleid: "",
        username: "",
        password: "",
        status: 1,
      };
    },
    getOneManUser(uid) {
      this.curid = uid;
      userInfo({ uid })
        .then((d) => {
          if (d.data.code == 200) {
            this.form = d.data.list;
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    canle() {
      //取消
      this.$emit("canle");
      this.curid = "";
      this.empty(); //初始化表单数据
    },
    modifymenu() {
      //修改
      userEdit(this.form)
        .then((d) => {
          if (d.data.code == 200) {
            successMsg("修改成功");
            this.empty(); //清空数据
            this.$emit("addmanUser");
          }else{
              failedMsg(d.data.msg)
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
  data() {
    return {
      form: {
        roleid: "",
        username: "",
        password: "",
        status: 1,
      },
      menuArr: [],
      formLabelWidth: "120px",
      curid: "",
    };
  },
  mounted() {
    roleList()
      .then((d) => {
        //查询角色列表
        if (d.data.code == 200) {
          this.menuArr = d.data.list;
        }
      })
      .catch((e) => {
        console.log(e);
      });
  },
};
</script>

<style>
</style>